/* pages/message/index/index.wxss */
.messagePage {
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.messageMain {
    flex-grow: 1;
    height: 0;

    .list {
        display: flex;
        flex-direction: column;
        gap: 24rpx;
        padding: 0 42rpx;
        padding-bottom: 100rpx;

        .item {
            background: #fff;
            border-radius: 24rpx;
            padding: 24rpx;

            .header {
                display: flex;
                justify-content: space-between;
            }

            .title {
                font-size: 32rpx;
                font-weight: 600;

                .iconfont {
                    font-size: 46rpx;
                    font-weight: 400;
                    padding-right: 10rpx;
                    position: relative;
                    transform: translateY(4rpx);
                    color: #adb5bd;
                    display: inline-block;
                }
            }

            .date {
                font-size: 20rpx;
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: center;

                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    width: 8rpx;
                    height: 8rpx;
                    background: #f00;
                    border-radius: 4rpx;
                    left: -20rpx;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }

            .body {
                padding: 36rpx 0;
                color: #adb5bd;
                font-size: 24rpx;
                line-height: 1.6em;
                border-bottom: #F7F7F9 2rpx solid;
            }

            .bottom {
                padding: 36rpx 0;
                display: flex;
                justify-content: space-between;
                padding-bottom: 0;

                .buttonArea {
                    display: flex;
                    gap: 48rpx;

                    .wrap {
                        display: flex;
                        gap: 24rpx;
                    }
                }

                .vButton {
                    height: 48rpx;
                    line-height: 48rpx;
                    width: auto;
                    padding: 0 20rpx;
                    font-size: 24rpx;
                    background: #058aff;
                    color: #fff;
                    &.button2{
                        background: #ff957f;
                    }
                }
                .icon{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    color: #808080;
                }
                .preview{
                    font-size: 24rpx;
                    color: #555557;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }
            }
        }
    }
}